<template>
  <div class="ani04">
    <h2>vue多组件动画</h2>
    <button @click="show=!show">toggle</button><br><hr>
    <transition mode="out-in" enter-active-class="animate__animated animate__fadeInDown"
                leave-active-class="animate__animated animate__fadeOutUp">
<!--      <img src="https://t7.baidu.com/it/u=2340400811,4174965252&fm=193&f=GIF" v-if="show" width="200">-->
      <h2 v-if="show" key="a">这是h21</h2>
      <h2 v-else key="b">这是h22</h2>
    </transition>
<!--  当多组件\标签时，可以增加在transition上加mode属性，in-out先进入动画，再退出动画；out-in则相反。
      当出现相同标签或组件时，动画将被vue省略，我们需要给标签或组件增加key属性来区分他们
  -->
  </div>
</template>

<script>
export default {
  name:"Animation03",
  data(){
    return {
      show:true
    }
  }
}
</script>

<style scoped>
@import '~animate.css';
.ani04 {
  width: 100%;
  height: 70%;
  background-color: blueviolet;
}
</style>